<template>
	<el-container>
		<el-aside width="200px">
			<buildingTree ref="building_tree" @treeNode-click="treeNodeClick"></buildingTree>
		</el-aside>
		<el-main id="el-main">
			<!--toolbar-->
			<el-row id="toolbar_unit">
				<el-col :span="24">
					<div class="grid-content bg-purple-light">
						<el-button type="success" size="mini" icon="el-icon-check" :disabled="addDisabled" @click="handleAdd">新增</el-button>
					</div>
				</el-col>
			</el-row>
			<!--列表-->
			<el-table :data="list" empty-text=" " height="410" border stripe size="mini" :header-row-class-name="headStyle" highlight-current-row v-loading="listLoading" :row-class-name="tableRowClassName" @selection-change="selsChange" style="width: 100%;">
				<el-table-column type="selection" width="45"></el-table-column>
				<el-table-column prop="index" :formatter="index_formatter" label="序号" width="60"></el-table-column>
				<el-table-column prop="minFloor" label="开始楼层" width="120" show-overflow-tooltip></el-table-column>
				<el-table-column prop="maxFloor" label="结束楼层" width="120" show-overflow-tooltip></el-table-column>
				<el-table-column prop="managerFee" label="物业费单价" width="120" show-overflow-tooltip></el-table-column>
				<el-table-column prop="shljFee" label="生活垃圾费单价" width="120" show-overflow-tooltip></el-table-column>
				<el-table-column prop="waterFee" label="水费单价" width="120" show-overflow-tooltip></el-table-column>
				<el-table-column prop="electricFee" label="电费单价" width="120" show-overflow-tooltip></el-table-column>
				<el-table-column prop="heatingFee" label="供暖单价" width="120" show-overflow-tooltip></el-table-column>
				<el-table-column prop="type" v-if="false"></el-table-column>
				<el-table-column prop="typeName" label="楼层用途" width="120" show-overflow-tooltip></el-table-column>
				<el-table-column prop="validDate" label="生效日期" width="120" show-overflow-tooltip></el-table-column>
				<el-table-column prop="invalidDate" label="失效日期" width="120" show-overflow-tooltip></el-table-column>
				<el-table-column prop="communityId" label="所属小区" v-if="false"></el-table-column>
				<el-table-column prop="buildingId" label="所属楼宇" v-if="false"></el-table-column>
				<el-table-column label="操作" width="160">
					<template slot-scope="scope">
						<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
						<el-button type="danger" size="mini" @click="handleDel(scope.$index, scope.row)">删除</el-button>
					</template>
				</el-table-column>
				<el-table-column label=""></el-table-column>
			</el-table>

			<!--工具条-->
			<el-col :span="24" class="toolbar">
				<el-pagination small background @current-change="handleCurrentChange" @size-change="handleSizeChange" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="total" layout="total,sizes, prev, pager, next" style="float:right;"></el-pagination>
			</el-col>

			<!--编辑界面-->
			<el-dialog title="编辑" :visible.sync="editFormVisible" :close-on-click-modal="false" @close="resetForm('editForm')">
				<el-form :model="editForm" label-width="120px" :rules="addFormRules" ref="editForm" size="mini">
					<el-input v-model="editForm.buildingId" type="hidden" style="display: none!important;"></el-input>
					<el-input v-model="editForm.communityId" type="hidden" style="display: none!important;"></el-input>
					<el-form-item label="开始楼层" prop="minFloor">
						<el-input v-model.number="editForm.minFloor" auto-complete="off" placeholder="请输入楼层数"></el-input>
					</el-form-item>
					<el-form-item label="结束楼层" prop="maxFloor">
						<el-input v-model.number="editForm.maxFloor" auto-complete="off" placeholder="请输入楼层数"></el-input>
					</el-form-item>
					<el-form-item label="物业费单价" prop="managerFee">
						<el-input v-model.number="editForm.managerFee" auto-complete="off" placeholder="请输入">
							<template slot="append">元/每平米</template>
						</el-input>
					</el-form-item>
					<el-form-item label="生活垃圾费单价" prop="shljFee">
						<el-input v-model.number="editForm.shljFee" auto-complete="off" placeholder="请输入">
							<template slot="append">元(元/每平米)</template>
						</el-input>
					</el-form-item>
					<el-form-item label="水费单价" prop="waterFee">
						<el-input v-model.number="editForm.waterFee" auto-complete="off" placeholder="请输入">
							<template slot="append">元/每立方</template>
						</el-input>
					</el-form-item>
					<el-form-item label="电费单价" prop="electricFee">
						<el-input v-model.number="editForm.electricFee" auto-complete="off" placeholder="请输入">
							<template slot="append">元/度</template>
						</el-input>
					</el-form-item>
					<el-form-item label="供暖单价" prop="heatingFee">
						<el-input v-model.number="editForm.heatingFee" auto-complete="off" placeholder="请输入">
							<template slot="append">元/每平米</template>
						</el-input>
					</el-form-item>
					<el-form-item label="楼层用途" prop="type">
						<el-radio-group v-model="editForm.type">
							<el-radio label="0">住宅</el-radio>
							<el-radio label="1">商用</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="有效时间" required>
						<el-col :span="11">
							<el-form-item prop="validDate">
								<el-date-picker type="date" placeholder="选择日期" v-model="editForm.validDate"  value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
							</el-form-item>
						</el-col>
						<el-col style="text-align:center" :span="2">-</el-col>
						<el-col :span="11">
							<el-form-item prop="invalidDate">
								<el-date-picker type="date" placeholder="选择日期" v-model="editForm.invalidDate"  value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
							</el-form-item>
						</el-col>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click.native="editFormVisible = false">取消</el-button>
					<el-button type="primary" @click.native="editSubmit" :loading="listLoading">提交</el-button>
				</div>
			</el-dialog>

			<!--新增界面-->
			<el-dialog title="新增" :visible.sync="addFormVisible" :close-on-click-modal="false" @close="resetForm('addForm')">
				<el-form :model="addForm" label-width="120px" :rules="addFormRules" ref="addForm" size="mini">
					<el-input v-model="addForm.buildingId" type="hidden" style="display: none!important;"></el-input>
					<el-input v-model="addForm.communityId" type="hidden" style="display: none!important;"></el-input>
					<el-form-item label="开始楼层" prop="minFloor">
						<el-input v-model.number="addForm.minFloor" auto-complete="off" placeholder="请输入楼层数"></el-input>
					</el-form-item>
					<el-form-item label="结束楼层" prop="maxFloor">
						<el-input v-model.number="addForm.maxFloor" auto-complete="off" placeholder="请输入楼层数"></el-input>
					</el-form-item>
					<el-form-item label="物业费单价" prop="managerFee">
						<el-input v-model.number="addForm.managerFee" auto-complete="off" placeholder="请输入单价">
							<template slot="append">元/每平米</template>
						</el-input>
					</el-form-item>
					<el-form-item label="生活垃圾费单价" prop="shljFee">
						<el-input v-model.number="addForm.shljFee" auto-complete="off" placeholder="请输入">
							<template slot="append">元(元/每平米)</template>
						</el-input>
					</el-form-item>
					<el-form-item label="水费单价" prop="waterFee">
						<el-input v-model.number="addForm.waterFee" auto-complete="off" placeholder="请输入">
							<template slot="append">元/每立方</template>
						</el-input>
					</el-form-item>
					<el-form-item label="电费单价" prop="electricFee">
						<el-input v-model.number="addForm.electricFee" auto-complete="off" placeholder="请输入">
							<template slot="append">元/度</template>
						</el-input>
					</el-form-item>
					<el-form-item label="供暖单价" prop="heatingFee">
						<el-input v-model.number="addForm.heatingFee" auto-complete="off" placeholder="请输入">
							<template slot="append">元/每平米</template>
						</el-input>
					</el-form-item>
					<el-form-item label="楼层用途" prop="type">
						<el-radio-group v-model="addForm.type">
							<el-radio label="0">住宅</el-radio>
							<el-radio label="1">商用</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="有效时间" required>
						<el-col :span="11">
							<el-form-item prop="validDate">
								<el-date-picker type="date" placeholder="选择日期" v-model="addForm.validDate" format="yyyy 年 MM 月 dd 日"  value-format="yyyy-MM-dd"  style="width: 100%;"></el-date-picker>
							</el-form-item>
						</el-col>
						<el-col style="text-align:center" :span="2">-</el-col>
						<el-col :span="11">
							<el-form-item prop="invalidDate">
								<el-date-picker type="date" placeholder="选择日期" v-model="addForm.invalidDate"  format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
							</el-form-item>
						</el-col>
					</el-form-item>

				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click.native="addFormVisible = false">取消</el-button>
					<el-button type="primary" @click.native="addSubmit" :loading="listLoading">提交</el-button>
				</div>
			</el-dialog>
			</div>
		</el-main>
	</el-container>

</template>

<script>
	import { mapGetters } from "vuex";
	import waves from "@/directive/waves/index.js"; // 水波纹指令
	import request from "@/router/axios";
	import buildingTree from '../managerfee/buildingTree.vue';

	export default {
		name: "table_role",
		components: {
			buildingTree
		},
		directives: {
			waves
		},
		data() {
			return {
				sels: [],
				list: null,
				listLoading: false,
				addDisabled: true,
				editFormVisible: false,
				addFormVisible: false,
				total: 0,
				page: 1,
				pageSize: 10,
				communityId: "",
				buildingId: "",
				addForm: {validDate:'',invalidDate:'',type:"0"},
				editForm: {},
				addFormRules: {
					minFloor: [{
							required: true,
							message: '请输入楼层数'
						},
						{
							type: 'number',
							message: '请输入数字'
						}
					],

					maxFloor: [{
						required: true,
						message: '请输入楼层数'
					}, {
						type: 'number',
						message: '请输入数字'
					}],
					managerFee: [{
						required: true,
						message: '请输入单价请输入单价'
					}, {
						type: 'number',
						message: '请输入数字'
					}],
					validDate: [{
						required: true,
						message: '请选择日期'
					}],
					invalidDate: [{
						required: true,
						message: '请选择日期'
					}],
				}

			};
		},
		computed: {
			...mapGetters(["elements", "permissions"])
		},
		methods: {
			selsChange: function(sels) {
				this.sels = sels;
			},
			getList(flag) {
				if(flag){
					this.page = 1;
				}
				let para = {
					params: {
						page: this.page,
						limit: this.pageSize,
						//排序
						communityId: this.communityId,
						buildingId: this.buildingId
					}
				};
				this.listLoading = true;
				request.get("/admin/communityManagerFee/page", para).then((res) => {
					this.total = res.data.total;
					var datas = res.data.records;
					this.list = datas;
					this.listLoading = false;
				});
			},
			handleSizeChange(val) {
				this.pageSize = val;
				this.page = 1;
				this.getList();
			},
			handleCurrentChange(val) {
				this.page = val;
				this.getList();
			},
			tableRowClassName(row, index) {
				//把每一行的索引放进row
				row.index = row.rowIndex
			},
			headStyle({
				row,
				rowIndex
			}) {
				return "table_head_style";
			},
			index_formatter: function(row, column, cellValue, index) {
				//放回索引值
				return(this.pageSize * (this.page - 1) + 1 + index);
			},
			handleEdit(index, row) {
				this.editFormVisible = true;
				this.editForm = Object.assign({}, row);
			},
			handleAdd() {
				// 获取当前树节点选中小区
				var data = this.$refs.building_tree.$refs.tree.getCurrentNode()
				var node = this.$refs.building_tree.$refs.tree.getNode(data.id)
				if(node.level == 1) {
					this.addForm.communityId = data.id;
				} else if(node.level == 2) {
					this.addForm.buildingId = data.id;
					this.addForm.communityId = node.parent.data.id;
				}
				this.addFormVisible = true;
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			handleDel(index, row) {
				this.$confirm('确认删除该记录吗?', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;

					request.get("/admin/communityManagerFee/delete/" + row.id).then((res) => {
						this.listLoading = false;
						this.$message({
							message: '删除成功',
							type: 'success',
							duration: 1500
						});
						this.getList();
					});
				}).catch(() => {

				});
			},
			addSubmit() {
				this.$refs.addForm.validate((valid) => {
					if(valid) {
						if(this.addForm.minFloor > this.addForm.maxFloor) {
							this.$message({
								message: '开始楼层大于结束楼层,请重新输入',
								type: 'info',
								duration: 1500
							});
							return;
						}
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.listLoading = true;
							let param = Object.assign({}, this.addForm);
							request.post("/admin/communityManagerFee/add", param).then((res) => {
								this.listLoading = false;
								if(!res.data.data) {
									this.$message({
										message: res.data.msg,
										type: 'error',
										duration: 1500
									});
									return;
								}
								this.$message({
									message: '提交成功',
									type: 'success',
									duration: 1500
								});
								this.$refs['addForm'].resetFields();
								this.addFormVisible = false;
								this.getList();
							});
						});
					}
				});
			},
			cancel(formName) {
				this.dialogFormVisible = false;
				this.$refs[formName].resetFields();
			},
			editSubmit() {
				this.$refs.editForm.validate((valid) => {
					if(valid) {
						if(this.editForm.minFloor > this.editForm.maxFloor) {
							this.$message({
								message: '开始楼层大于结束楼层,请重新输入',
								type: 'info',
								duration: 1500
							});
							return;
						}
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.listLoading = true;
							let para = Object.assign({}, this.editForm);
							request.post("/admin/communityManagerFee/update", para).then((res) => {
								this.listLoading = false;
								if(!res.data.data) {
									this.$message({
										message: res.data.msg,
										type: 'error',
										duration: 1500
									});
									return;
								}
								this.$message({
									message: '提交成功',
									type: 'success',
									duration: 1500
								});
								this.$refs['editForm'].resetFields();
								this.editFormVisible = false;
								this.getList();
							});
						});
					}
				});
			},
			treeNodeClick(data, node) {
				this.addDisabled = true;
				this.communityId = "";
				this.buildingId = "";
				if(node.level == 1) {
					this.communityId = data.id
				} else if(node.level == 2) {
					this.addDisabled = false;
					this.buildingId = data.id
				}
				this.getList(true);
			}
		}
	};
</script>